<template>
  <view class="apply_bank_upload_file_wrap">
    <view class="title">
      图片上传
    </view>
    <view class="content">
      <view class="sub-item">
        <view class="header-wrap">
          <view class="left">
            1.《银联商务特约商户支付服务协议》 文件
          </view>
          <view class="right" @click="previewImg(1)">
            示例
          </view>
        </view>
        <view class="tip">
          上传盖章的文档页（服务协议第10页）
        </view>
        <view class="sub-item-content">
          <view class="common-img-wrap" v-for="(item, index) in data.unionPayService" :key="index">
            <view class="upload-img-wrap">
              <image :src="item.url" mode="" class="upload-img"></image>
              <view class="close" @click.stop="delImg(1, index)">
                <image :src="$store.state.imgBaseUrl + '/cancel.png'">
              </view>
            </view>
          </view>
          <view class="common-img-wrap" @click="uploadFile(1)">
            <view class="no-upload-img">
              <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
              <view class="text">
                上传图片
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="sub-item">
        <view class="header-wrap">
          <view class="left">
            2.《银联商务特约商户支付业务申请书》文件
          </view>
          <view class="right" @click="previewImg(2)">
            示例
          </view>
        </view>
        <view class="tip">
          上传有商户信息或有盖章的文档页（申请书的第6页）
        </view>
        <view class="sub-item-content">
          <view class="common-img-wrap" v-for="(item, index) in data.unionPayBusiness" :key="index">
            <view class="upload-img-wrap">
              <image :src="item.url" mode="" class="upload-img"></image>
              <view class="close" @click.stop="delImg(2, index)">
                <image :src="$store.state.imgBaseUrl + '/cancel.png'">
              </view>
            </view>
          </view>
          <view class="common-img-wrap" @click="uploadFile(2)">
            <view class="no-upload-img">
              <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
              <view class="text">
                上传图片
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="sub-item">
        <view class="header-wrap">
          <view class="left">
            3.《跨地区使用申请表》 文件
          </view>
          <view class="right" @click="previewImg(3)">
            示例
          </view>
        </view>
        <view class="tip">
          上传签字盖章后的申请表（要求拍摄清晰，可辨识）
        </view>
        <view class="sub-item-content">
          <view class="common-img-wrap" v-for="(item, index) in data.unionCrossArea" :key="index">
            <view class="upload-img-wrap">
              <image :src="item.url" mode="" class="upload-img"></image>
              <view class="close" @click.stop="delImg(3, index)">
                <image :src="$store.state.imgBaseUrl + '/cancel.png'">
              </view>
            </view>
          </view>
          <view class="common-img-wrap" @click="uploadFile(3)">
            <view class="no-upload-img">
              <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
              <view class="text">
                上传图片
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="sub-item">
        <view class="header-wrap">
          <view class="left">
            4.《身份证复印件—加盖公章》 文件
          </view>
          <view class="right" @click="previewImg(4)">
            示例
          </view>
        </view>
        <view class="tip">
          上传签字盖章后的身份证正反面复印件（要求拍摄清晰，可辨识）
        </view>
        <view class="sub-item-content">
          <view class="common-img-wrap" v-for="(item, index) in data.idCardCopies" :key="index">
            <view class="upload-img-wrap">
              <image :src="item.url" mode="" class="upload-img"></image>
              <view class="close" @click.stop="delImg(4, index)">
                <image :src="$store.state.imgBaseUrl + '/cancel.png'">
              </view>
            </view>
          </view>
          <view class="common-img-wrap" @click="uploadFile(4)">
            <view class="no-upload-img">
              <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
              <view class="text">
                上传图片
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="sub-item">
        <view class="header-wrap">
          <view class="left">
            5.《营业执照复印件—加盖公章》 文件
          </view>
          <view class="right" @click="previewImg(5)">
            示例
          </view>
        </view>
        <view class="tip">
          上传签字盖章后的营业执照复印件（要求拍摄清晰，可辨识）
        </view>
        <view class="sub-item-content">
          <view class="common-img-wrap" v-for="(item, index) in data.businessLicenseCopies" :key="index">
            <view class="upload-img-wrap">
              <image :src="item.url" mode="" class="upload-img"></image>
              <view class="close" @click.stop="delImg(5, index)">
                <image :src="$store.state.imgBaseUrl + '/cancel.png'">
              </view>
            </view>
          </view>
          <view class="common-img-wrap" @click="uploadFile(5)">
            <view class="no-upload-img">
              <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
              <view class="text">
                上传图片
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="sub-item">
        <view class="header-wrap">
          <view class="left">
            6.《开户证明复印件—加盖公章》 文件
          </view>
          <view class="right" @click="previewImg(6)">
            示例
          </view>
        </view>
        <view class="tip">
          上传签字盖章后的开户证明复印件（要求拍摄清晰，可辨识）
        </view>
        <view class="sub-item-content">
          <view class="common-img-wrap" v-for="(item, index) in data.bankCertificateCopies" :key="index">
            <view class="upload-img-wrap">
              <image :src="item.url" mode="" class="upload-img"></image>
              <view class="close" @click.stop="delImg(6, index)">
                <image :src="$store.state.imgBaseUrl + '/cancel.png'">
              </view>
            </view>
          </view>
          <view class="common-img-wrap" @click="uploadFile(6)">
            <view class="no-upload-img">
              <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
              <view class="text">
                上传图片
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="footer">
      <button type="primary" class="btn" @click="submit">提交申请</button>
    </view>
  </view>
</template>

<script>
import { uploadFile, checkImage } from '@/unit/common.js'
import formValid from '@/unit/graceChecker.js'
import { uploadContractPhotoApi, getBankQrcodeFilesApi } from '@/service/qrCode/qrCode.service.js'
export default {
  data () {
    return {
      data: {
        unionPayService: [], // 服务协议
        unionPayBusiness: [], // 支付业务申请书
        unionCrossArea: [], // 《跨地区使用申请表》和《承诺书》
        idCardCopies: [], // 《身份证复印件—加盖公章》
        businessLicenseCopies: [], // 《营业执照复印件—加盖公章》
        bankCertificateCopies: [] // 《开户证明复印件—加盖公章》
      }
    }
  },
  mounted() {
    this.getBankQrcodeFiles();
  },
  methods: {
    getBankQrcodeFiles() {
      getBankQrcodeFilesApi({}, res => {
        // unionPayService: [], // 服务协议
        // unionPayBusiness: [], // 支付业务申请书
        // unionCrossArea: [], // 《跨地区使用申请表》和《承诺书》
        // idCardCopies: [], // 《身份证复印件—加盖公章》
        // businessLicenseCopies: [], // 《营业执照复印件—加盖公章》
        // bankCertificateCopies: [] // 《开户证明复印件—加盖公章》
        if (res.status == 0) {
          this.data.unionPayService = res.data.unionPayServiceImages;
          this.data.unionPayBusiness = res.data.unionPayBusinessImages; 
          this.data.unionCrossArea = res.data.unionCrossAreaImages;
          this.data.idCardCopies = res.data.idCardCopiesImages;
          this.data.businessLicenseCopies = res.data.businessLicenseCopiesImages;
          this.data.bankCertificateCopies = res.data.bankCertificateCopiesImages;
        }
      })
    },
    previewImg (type) { // 查看示例图片
      switch (type) {
      case 1:
        checkImage([this.$store.state.imgBaseUrl + '/qrcode/sample/application_protocol.jpg'], 0);
        break;
      case 2:
        checkImage([this.$store.state.imgBaseUrl + '/qrcode/sample/pay_service.jpg'], 0);
        break;
      case 3:
        checkImage([this.$store.state.imgBaseUrl + '/qrcode/sample/trans-regional.jpg'], 0);
        break;
      case 4:
        checkImage([this.$store.state.imgBaseUrl + '/qrcode/sample/identityCard.jpg'], 0);
        break;
      case 5:
        checkImage([this.$store.state.imgBaseUrl + '/qrcode/sample/license.jpg'], 0);
        break;
      case 6:
        checkImage([this.$store.state.imgBaseUrl + '/qrcode/sample/account-opening.jpg'], 0);
        break;
      default:
      }
    },
    delImg (type, index) {
      switch (type) {
      case 1:
        this.data.unionPayService.splice(index, 1);
        break;
      case 2:
        this.data.unionPayBusiness.splice(index, 1);
        break;
      case 3:
        this.data.unionCrossArea.splice(index, 1);
        break;
      case 4:
        this.data.idCardCopies.splice(index, 1);
        break;
      case 5:
        this.data.businessLicenseCopies.splice(index, 1);
        break;
      case 6:
        this.data.bankCertificateCopies.splice(index, 1);
        break;
      default:
      }
    },
    uploadFile (type) {
      uploadFile({
        success: (res) => {
          switch (type) {
          case 1:
            this.data.unionPayService.push({
              fileId: res.data.id,
              url: res.data.url
            });
            break;
          case 2:
            this.data.unionPayBusiness.push({
              fileId: res.data.id,
              url: res.data.url
            });
            break;
          case 3:
            this.data.unionCrossArea.push({
              fileId: res.data.id,
              url: res.data.url
            });
            break;
          case 4:
            this.data.idCardCopies.push({
              fileId: res.data.id,
              url: res.data.url
            });
            break;
          case 5:
            this.data.businessLicenseCopies.push({
              fileId: res.data.id,
              url: res.data.url
            });
            break;
          case 6:
            this.data.bankCertificateCopies.push({
              fileId: res.data.id,
              url: res.data.url
            });
            break;
          default:
          }
        }
      });
    },
    submit () {
      let rule = [
        { name:'unionPayService', checkType: 'notnull', checkRule: '',  errorMsg: '请上传银联商务特约商户支付服务协议' },
        { name:'unionPayBusiness', checkType: 'notnull', checkRule: '',  errorMsg: '请上传银联商务特约商户支付业务申请书' },
        { name:'unionCrossArea', checkType: 'notnull', checkRule: '',  errorMsg: '请上传《跨地区使用申请表》和《承诺书》' },
        { name:'idCardCopies', checkType: 'notnull', checkRule: '',  errorMsg: '请上传身份证复印件—加盖公章' },
        { name:'businessLicenseCopies', checkType: 'notnull', checkRule: '',  errorMsg: '请上传营业执照复印件—加盖公章' },
        { name:'bankCertificateCopies', checkType: 'notnull', checkRule: '',  errorMsg: '请上传开户证明复印件—加盖公章' },
      ];
      var checkRes = formValid.check(this.data, rule);
      if (checkRes) {
        let params = Object.assign({
          unionPayService: this.data.unionPayService.map(item => item.fileId).join(','), // 服务协议
          unionPayBusiness: this.data.unionPayBusiness.map(item => item.fileId).join(','), // 支付业务申请书
          unionCrossArea: this.data.unionCrossArea.map(item => item.fileId).join(','), // 《跨地区使用申请表》和《承诺书》
          idCardCopies: this.data.idCardCopies.map(item => item.fileId).join(','), // 《身份证复印件—加盖公章》
          businessLicenseCopies: this.data.businessLicenseCopies.map(item => item.fileId).join(','), // 《营业执照复印件—加盖公章》
          bankCertificateCopies: this.data.bankCertificateCopies.map(item => item.fileId).join(',')
        });
        uploadContractPhotoApi(params, res => {
          if (res.status == 0) {
            uni.showToast({
              title: '上传成功！',
              success: () => {
                uni.removeStorageSync('yLContractKey');
                setTimeout(function () {
                  uni.switchTab({
                    url: '/pages/index/index'
                  })
                }, 1500)
              }
            })
          }
        }, null, {showErrorMsg: true});  
      } else {
        uni.showToast({ title: formValid.error, icon: "none" });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .apply_bank_upload_file_wrap {
    padding: 34rpx 30rpx 0 30rpx;
    .title {
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .content {
      
      .sub-item {
        margin-top: 36rpx;
        border-bottom: 2rpx solid #E1E1E1;
        padding-bottom: 16rpx;
        &:last-child {
          border-bottom: none;
        }
        .header-wrap {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
          .right {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            text-decoration: underline;
            color: #FF7473;
          }
        }
        .tip {
          margin-top: 20rpx;
          margin-left: 30rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
        }
        .sub-item-content {
          display: flex;
          margin-top: 22rpx;
          flex-wrap: wrap;
          .common-img-wrap {
            margin-top: 30rpx;
            width: 142rpx;
            height: 142rpx;
            border: 1px dashed #E1E1E1;
            border-radius: 16rpx;
            margin-left: 20rpx;
            &:first-child {
              margin-left: 0rpx;
            }
            .no-upload-img {
              width: 100%;
              height: 100%;
              display: flex;
              flex-flow: column;
              align-items: center;
              justify-content: center;
              .img {
                width: 60rpx;
                height: 60rpx;
              }
              .text {
                margin-top: 29rpx;
                color: #666666;
                font-size: 24rpx;
                font-weight:500;
              }
            }
            
            .upload-img-wrap {
              width: 100%;
              height: 100%;
              position: relative;
              .upload-img {
                width: 100%;
                height: 100%;
                border-radius: 16rpx;
              }
              .close {
                position: absolute;
                width: 32rpx;
                height: 32rpx;
                top: -20rpx;
                right: -20rpx;
                image {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
          // .img {
          //   margin-left: 20rpx;
          //   width: 142rpx;
          //   height: 142rpx;
          //   &:first-child {
          //     margin-left: 0rpx;
          //   }
          // }
        }
      }
    }
    .footer {
      display: flex;
      align-items: center;
      height: 114rpx;
      border-top: 2rpx solid #E1E1E1;
      .btn {
        width: 688rpx;
        height: 80rpx;
        background: #434343;
        border-radius: 10rpx;
        color: #F6DA99;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
      }
    }
  }
</style>
